<template>
	<view class="content">
		<image class="background-image" src="/static/logo.png" mode=""></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<view>
			<view>{{ number + 1}}</view>
			<view>{{ Ok ? 'Yes' : 'No'}}</view>
			<view>{{ message.split('').reverse('').join('') }}</view>
		</view>
		<view v-if="!raining">今天天气真好哇！！！</view>
		<view v-if="raining">下雨咯，出不了门咯</view>
		<view v-if="state === 'vue'">state的值是Vue</view>
		<view>State is {{state ?  'vue' : 'App'}}</view>
		<view>
			<view v-if="state ==='vue'">uni-app</view>
			<view v-else-if="state === 'html'">HTML</view>
			<view v-else>App</view>
		</view>
		
		<view v-for="item in arr" style="color: #ff0000;"> {{item}} </view>
		<view v-for="(item,index) in 4" style="color: #00ff00;">
			<view :class="'list-'+ index%2">{{index+1}}</view>
		</view>
		<view v-for="(value,name,index) in object">
           {{index+1}}.{{name}} : {{value}}
		</view>
		<view v-for="item in arr":key="item.id">
			<view style="color: #0000ff;">{{item.id}}:{{item.name}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:'hello',
				number:1,
				Ok:true,
				message:'Hello Yh!',
				
				raining:false,
				state:'vue',
				
				arr:[
					{id:1,name:'uni-app'},
					{id:2,name:'HTML'},
				],
				object:{
					title:'今天吃什么',
					author:'Wyhong',
					publishedAt:'2025-10-14'
				}
			}
		},
		methods: {
			
		}
	}
</script>

<style>
   .content{
	text-align: center;
   }
   
   .background-image{
	   width: 120rpx;
	   height: 120rpx;
	   
   }
</style>
